<template>
  <el-dialog v-dialogDrag :visible.sync="dialogVisible" :title="title" width="1050px" @close="resetForm('ruleForm')">
    <button-group ref="buttonGroup" @submitForm="submitForm('ruleForm')" @cancel="dialogVisible = false" />
    <div class="formTopFont">保养任务单</div>
    <el-row>
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="auto">
        <el-row>
          <el-col :span="12">
            <el-form-item label="保养人" prop="maintainBy">
              <el-select v-model="ruleForm.maintainBy" style="width: 100%">
                <el-option v-for="item in userAllList" :key="item.id" :label="item.name" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker v-model="ruleForm.startTime" style="width: 100%" :clearable="false" type="datetime" size="mini" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker v-model="ruleForm.endTime" @change="timeChange" style="width: 100%" :clearable="false" type="datetime" size="mini" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm:ss" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="保养工时" prop="maintainHours">
              <el-input-number v-model="ruleForm.maintainHours" disabled :precision="2" :min="0" size="mini" :max="9999.99" style="width: 80%;margin-right:1%;" :controls="false" />小时
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-table ref="tableData" v-if="obj.status === 2" stripe border :data="tableDate" height="250px">
        <el-table-column prop="itemName" label="保养项名称" align="left" show-overflow-tooltip />
        <el-table-column prop="itemCode" label="保养项编码" align="left" show-overflow-tooltip />
        <el-table-column prop="remark" label="保养项描述" align="left" show-overflow-tooltip />
        <el-table-column prop="isFinish" label="是否完成" align="center" width="200">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.isFinish" :disabled="obj.status == '3'" :true-label="1" :false-label="0">是</el-checkbox>
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align:right;">
        <el-button type="primary" icon="el-icon-check" v-if="obj.status === 2" @click="submitForm('ruleForm')">报工</el-button>
      </p>
    </el-row>
  </el-dialog>
</template>
<script>
import { computationTime, timeFormatToString } from '@/utils/function'
export default {
  props: {
    userAllList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      title: '',
      ruleForm: {
        maintainHours: '',
        maintainBy: null,
        startTime: '',
        endTime: ''
      },
      rules: {
        maintainBy: [
          { required: true, message: '保养人不能为空！', trigger: 'change' }
        ],
        startTime: [
          { required: true, message: '开始时间不能为空！', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '结束时间不能为空！', trigger: 'blur' }
        ]
      },
      dialogVisible: false,
      obj: {},
      tableDate: []
    }
  },
  watch: {},
  mounted() {},
  methods: {
    async showInfo(row) {
      this.obj = row
      if (row.status === 1) {
        this.title = '详情'
      } else if (row.status === 2) {
        this.title = '报工'
        this.ruleForm = Object.assign({}, row)
        await this.getItemList(row)
      }
      this.dialogVisible = true
    },
    async getItemList(row) {
      const res = await this.$axios.get(
        `/equip/maintain/infoRelation/getItemListByClassify?id=${row.classifyId}`
      )
      if (res?.data.code === 200) {
        res.data.data.forEach((item) => (item.isFinish = 1))
        this.tableDate = res.data.data
      }
    },
    /* 结束时间选择事件 */
    timeChange($event) {
      if (computationTime(this.ruleForm.startTime, $event) < 0) {
        this.ruleForm.endTime = ''
        this.$message.error('结束时间不能早于开始时间！')
      }
      let start = timeFormatToString(this.ruleForm.startTime)
      let time = new Date($event).getTime() - new Date(start).getTime()
      if (time > 0) {
        let num = time / 3600000
        this.ruleForm.maintainHours = parseFloat(num).toFixed(2)
      } else {
        this.ruleForm.maintainHours = '0.00'
      }
    },
    /**
     * @description: 表单提交
     * @param {*} formName
     * @return {*}
     */
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (this.tableDate.length > 0) {
            this.ruleForm.itemList = this.tableDate
            this.ruleForm.itemList.forEach((item) => (item.itemId = item.id))
            const res = await this.$axios.post(
              '/equip/maintain/task/report',
              this.ruleForm
            )
            if (res?.data.code === 200) {
              this.$notify.success('提交成功！')
              this.dialogVisible = false
              this.$emit('getTableInfo')
            } else {
              this.$notify.error(res.data.msg)
            }
          } else {
            this.$alert(
              `请先维护【${this.obj.classifyName}】保养项 !`,
              '提示',
              {
                confirmButtonText: '确认',
                type: 'warning'
              }
            )
          }
        }
      })
    },
    closeBtn(formName) {
      this.$emit('getTableInfo')
      this.dialogVisible = false
      this.resetForm(formName)
    },
    /**
     * @description: 重置表单
     * @param {*} formName
     * @return {*}
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.ruleForm = {
        maintainHours: '',
        maintainBy: null,
        startTime: '',
        endTime: ''
      }
    }
  }
}
</script>
<style lang='scss' scoped>
</style>
